<template>
  <div>
    <!-- <h1>你好,我是词云组件...</h1> -->
    <div id="app">
    <!--fontSize调整字体-->
      <wordcloud
        :data="defaultWords"
        nameKey="name"
        valueKey="value"
        :color="myColors"
        :showTooltip="false"
        :wordClick="wordClickHandler"
        :fontSize=[20,80]
      >
      </wordcloud>
    </div>
  </div>
</template>

<script>
// 直接使用vue的插件实现词云效果
import wordcloud from "vue-wordcloud";
export default {
  data() {
    return {
      // 绘制的数据  可以在这里修改文字的颜色
      // #C82C19 红色  #FF9F5E橙色 #FFE79C黄色   可以继续加颜色的
      myColors: ["#C82C19", "#FF9F5E", "#FFE79C", "#FF8626" ,"#FCBF00"],
      defaultWords: [
       
      ],
    };
  },
  name: "app",
  components: {
    wordcloud,
  },
  methods: {
    // 词的点击事件的回调函数 
    wordClickHandler(name, value, vm) {
      // console.log("wordClickHandler", name, value, vm);
    },
    updateData(value) {
      // 把接收到的数据  赋值给当前需要绘制的数据
      this.defaultWords=value
      
    },
    
  },
 
  // 挂载
  mounted() {},
};
</script>
<style scoped>
#app {
  height: 450px;
  width: 700px;
}
</style>